<template>
    <div class="cd-wrapper" @click="treeBlurHide">
        <div class="table">
            <el-row class="header_row">
                <el-col :span="24">客户基本信息</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">销售员：</el-col>
                <el-col :span="8" class="col_2">{{ customerDetail.userName }}</el-col>
                <el-col :span="12" class="col_4">
                    <el-button v-if="from == 'index'" type="primary" size="small" @click="editCustomer" style="margin-left:24px">修改客户</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">客户名称：</el-col>
                <el-col :span="8" class="col_2"><pre>{{ customerDetail.customerName }}</pre></el-col>
                <el-col :span="4" class="col_3">客户类别：</el-col>
                <el-col :span="8" class="col_4">{{ customerDetail.customerType }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">修改时间：</el-col>
                <el-col :span="8" class="col_2">{{ customerDetail.customerNameModifytime | formatUpdateTime }}</el-col>
                <el-col :span="4" class="col_3">所属行业：</el-col>
                <el-col :span="8" class="col_4">{{ customerDetail.customerIndustryName }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">客户网站：</el-col>
                <el-col :span="8" class="col_2"><span class="customer_web" @click="openWeb(customerDetail.customerWeb)">{{ customerDetail.customerWeb }}</span></el-col>
                <el-col :span="4" class="col_3">客户地址：</el-col>
                <el-col :span="8" class="col_4">{{newAddress }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">客户来源：</el-col>
                <el-col :span="8" class="col_2">{{ customerDetail.customerFrom }}</el-col>
                <el-col :span="4" class="col_3">KP：</el-col>
                <el-col :span="8" class="col_4">
                    <el-checkbox v-model="kpFlag"></el-checkbox>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 ">所属业务块：</el-col>
                <el-col :span="8" class="col_2 ">{{customerDetail.block}}</el-col>
                <el-col :span="4" class="col_3 ">关联品牌：</el-col>
                <el-col :span="8" class="col_4 ">{{brandName}}</el-col>
            </el-row>
        </div>

        <div class="table">
            <el-row class="header_row">
                <el-col :span="24">联系人信息</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">联系人名称：</el-col>
                <el-col :span="8" class="col_2">{{ contactData.contactName }}</el-col>
                <el-col :span="4" class="col_3">手机号码：</el-col>
                <el-col :span="8" class="col_4">
                    {{ contactData.tel }}
                    <span v-if="contactData.tel && from == 'index'">
                        <el-button v-show="!callTel" type="primary" size="small" @click="callContact(contactData.tel,'tel')" style="margin-left: 10px">拨打电话</el-button>
                        <el-button v-show="callTel" type="danger" size="small" @click="callHangContact('tel')" style="margin-left: 10px">挂断电话</el-button>
                        <el-button type="primary" size="small" @click="showMessageDialog" style="margin-left: 10px">发送短信</el-button>
                    </span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 col_bottom">办公电话：</el-col>
                <el-col :span="8" class="col_2 col_bottom">
                    {{ contactData.phone }}
                    <span v-if="contactData.phone && from == 'index'">
                        <el-button v-show="!callPhone" type="primary" size="small" @click="callContact(contactData.phone,'phone')" style="margin-left: 10px">拨打电话</el-button>
                        <el-button v-show="callPhone" type="danger" size="small" @click="callHangContact('phone')" style="margin-left: 10px">挂断电话</el-button>
                    </span>

                </el-col>
                <el-col :span="4" class="col_3 col_bottom">QQ：</el-col>
                <el-col :span="8" class="col_4 col_bottom">{{ contactData.qq }}</el-col>
            </el-row>
        </div>

        <div class="table">
            <el-row class="header_row">
                <el-col :span="24">跟进信息</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">是否有效联系：</el-col>
                <el-col :span="8" class="col_2">
                    <el-radio v-model="contactState" class="radio" label="1">是</el-radio>
                    <el-radio v-model="contactState" class="radio" label="0">否</el-radio>
                </el-col>
                <el-col :span="4" class="col_3 ">是否重要客户：</el-col>
                <el-col :span="8" class="col_4">
                    <el-radio v-model="followForm.importantFlag" class="radio" :label="followForm.importantFlag? '1' : '0'">是</el-radio>
                    <el-radio v-model="followForm.importantFlag" class="radio" :label="!followForm.importantFlag? '1' : '0'">否</el-radio>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">客户类别：</el-col>
                <el-col :span="8" class="col_2">
                    <el-select size="small" v-model="followForm.customerLevel">
                        <el-option v-for="item in customerLevels" :value="item.key" :label="item.value"
                                   :key="item.key"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" class="col_3">KP：</el-col>
                <el-col :span="8" class="col_4">
                    <el-checkbox v-model="followForm.kpFlag"></el-checkbox>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">小计模板：</el-col>
                <el-col :span="8" class="col_2">
                    <el-select @change="noteTemplateChange" v-model="noteTemplate" size="small">
                        <el-option v-for="(item,index) in noteTemplateList" :label="item.templateName" :value="index" :key="item.key"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" class="col_3">下次联系时间：</el-col>
                <el-col :span="8" class="col_4">
                    <el-date-picker type="datetime" size="small" v-model="followForm.planDate"
                                    :picker-options="pickerOptions" :editable="pickerState"></el-date-picker>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 content_title">跟进内容：</el-col>
                <el-col :span="20" class="col_4 content_text">
                    <el-input type="textarea" :rows="13" v-model="followForm.contents"></el-input>
                </el-col>
            </el-row>
            <el-row class="table_action_row">
                <el-col :span="24">
                    <el-button v-if="from == 'index'" size="small" @click="returnCustomerBox"><i class="fa fa-reply-all"></i> 扔回公海</el-button>
                    <el-button @click="onSubmit" type="primary" size="small"  icon="el-icon-plus">保存</el-button>
                </el-col>
            </el-row>
        </div>
        
        <div class="follow_list" v-for="(item,index) in followList" >
            <el-row>
                <el-col :span="5">添加时间: <span class="time_sty">{{ item.createDate }}</span></el-col>
                <el-col :span="6">客户类型：{{ item.typeName }}</el-col>
                <el-col :span="5">下次联系时间：<span class="time_sty">{{ item.planDate }}</span></el-col>
                <el-col :span="4">添加人：{{ item.createUserId }}</el-col>
                <el-col :span="4">
                    <span v-if="item.recordURL != null">{{item.callTypeName}}:
                        <span>
                            <img v-show="!audioStatus[index].playing" @click="playAudio(item.id,index)" class="audio-play" src="~assets/img/play-icon.png" alt="play-iocn">
                            <img v-show="audioStatus[index].playing" @click="pauseAudio(item.id,index)" class="audio-pause" src="~assets/img/pause-icon.png" alt="pause-iocn">
                            <span style="padding-left: 5px">{{item.timeChange}}</span>
                            <audio :id="item.id" :src="item.recordURL"></audio>
                        </span>
                    </span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="follow_content" v-html="item.contents">
                </el-col>
                <!-- <el-input type="textarea" :rows="13" v-model="item.contents"></el-input> -->
            </el-row>
        </div>

         <div v-if="from == 'seas'" class="cd-get-allot">
            <el-button @click="receiveBox" type="primary" size="small"><i class="fa fa-share"></i> 领取</el-button>
            <el-button @click="transDialog" type="primary" size="small"><i class="fa fa-share-alt"></i> 分配</el-button>
        </div> 

        <!--分配弹框-->
        <el-dialog title="分配" :visible.sync="dialogTableVisible" @close="closeDialog" >
            <el-form label-width="80px" :inline="true">
                <el-form-item label="选择部门：" :label-width="formLabelWidth">
                    <el-select v-model="userFilter.deptId" placeholder="请选择部门" size="small" @change="selectDept">
                        <el-option
                                v-for="(item,index) in deptList"
                                :value="item.deptId"
                                :label="item.name"
                                :key="index">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-table class="seller-table" :data="userList" highlight-current-row height="250" @current-change="highlightDialog" @row-click="selectUser">
                <el-table-column property="account" label="用户名" width=""></el-table-column>
                <el-table-column property="name" label="用户姓名" width=""></el-table-column>
                <el-table-column property="departmentName" label="部门"></el-table-column>
            </el-table>
            <el-row class="paging" style="margin-top: 10px">
                <el-pagination
                        @size-change="userHandleSizeChange"
                        @current-change="userHandleCurrentChange"
                        :current-page="pagingUserData.pageNum"
                        :page-sizes="pagingUserData.pageSizes"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagingUserData.total">
                </el-pagination>
            </el-row>
            <el-row>
                <el-col :span="24" class="trans_button_col" style="text-align: center;padding-top: 15px;">
                    <el-button size="small" type="primary" @click="transSubmit"><i class="fa fa-save"></i> 保存</el-button>
                    <el-button size="small" type="danger" @click="dialogTableVisible = false"><i class="fa fa-sign-out"></i> 关闭</el-button>
                </el-col>
            </el-row>
        </el-dialog>

        <!--短信弹框-->
        <message :userData="userData" :from="detail"/>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        Row, Col, Form, FormItem, Input, Select, Option, Radio, DatePicker,Tabs,TabPane,Tree,Pagination,
        Cascader, ButtonGroup, Button, Table, TableColumn, Checkbox, Message, MessageBox, Dialog
    } from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import * as types from '../store/mutation-types/customer/index';
    import {SHOW_MESSAGE,MESSAGE_IDS,MESSAGE_NAMES,MESSAGE_TELS} from '../store/mutation-types/template/index';
    import {formatDate} from '../assets/js/common.js';
    import {getDate, getCookie} from '../utils/auth.js';
    import Cookie from 'js-cookie';
    import axios from '~plugins/axios';
    import message from '~components/message.vue';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Radio);
    Vue.use(DatePicker);
    Vue.use(Cascader);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(Tree);
    Vue.use(Pagination);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(Dialog);

    Vue.prototype.$message = Message;

    export default {
        components: {
            message
        },
        props: {
            'data': {
                default: {}
            },
            'from': {
                default: {}
            }
        },
        data () {
            return {
                detail: 'detail',
                customerDetail: [],
                brandName:'', //关联品牌名称
                newAddress:'',
                contactData: {
                    contactName: '',
                    tel: '',
                    phone: '',
                    qq: ''
                },
                followList: [],
                contactState: '0', //是否有效联系
                followForm: {
                    customerName:'',
                    
                    importantFlag: '0', //是否重要客户
                    kpFlag: false, //kp
                    customerLevel: '', //客户类别
                    planDate: '', //下次联系时间
                    contents: '' //跟进内容
                },
                noteTemplate: '',//小计模板
                noteTemplateList: [],
                pickerState: false,
                formLabelWidth: '120px',
                dialogTableVisible: false,
                positionForm: {
                    department: '',
                    showTree: false,
                    departmentName: '龙席集团'
                },
                departmentTree: [],
                departmentTreeProps: {
                    label: 'name',
                    children: 'zones'
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                userList: [],
                pagingUserData: {
                    pageSizes: [10, 20, 30, 40, 50],	// 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
                userFilter: {
                    pageNum: 1,
                    pageSize: 10,
                    deptId: '',
                },
                dialogCurrentRow: null,         // dialog高亮的行
                transSelectedCustomerId: null,  // 选择需要分配的客户id
                transSelectedUserId: null,      // dialog单击选择的用户id
                departmentRoleId: '',           // 当前登录用户的部门角色id
                multipleSelection: [],           // checkbox选中客户列表数据
                category: {
                    name: '',
                    showTree: false,
                    data:[{
                        id: 0,
                        label: '全部',
                        children: [{    //预留children
                            id: 1,
                            label: '暂无数据'
                        }]
                    }]
                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                callPhone: false,
                callTel: false,
                userData:{
                    userName: '',
                    userId: '',
                    deptCode: ''
                },
                audioStatus: [],
                deptList: []
            }
        },
        filters: {
            formatUpdateTime(time) {
                if(!time) return '';
                let date = new Date(time);
                return getDate(date,false)
            },
            formatAudioTime(value) {
                let min = Math.floor(value/60);
                let sec = value%60;
                return min+"分 "+sec+"秒"
            }
        },
        watch:{
            'contactState'(){
                this.$store.commit('FOLLOW_CONTENT_CACHE',{data:this.followForm})
            },
            'followForm.importantFlag'(){
                this.$store.commit('FOLLOW_CONTENT_CACHE',{data:this.followForm})
            },
            'followForm.kpFlag'(){
                this.$store.commit('FOLLOW_CONTENT_CACHE',{data:this.followForm})
            },
            'followForm.customerLevel'(){
                this.$store.commit('FOLLOW_CONTENT_CACHE',{data:this.followForm})
            },
            'followForm.planDate'(){
                this.$store.commit('FOLLOW_CONTENT_CACHE',{data:this.followForm})
            },
            'followForm.contents'(){
                this.$store.commit('FOLLOW_CONTENT_CACHE',{data:this.followForm})
            }
        },
        methods: {
            /*goBack () {
                window.history.go(-1);
            },*/
            returnCustomerBox(){
                this.$confirm('确认将客户扔回公海吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = this.data.id;
                    this.$store.dispatch('returnCustomer', {ids: ids})
                        .then((response) => {
                            if(!response){return}
                            let result = response.data;
                        if (result.code === 0) {
                            Message.success('扔回成功');
                        } else {
                            Message.error(result.message);
                        }
                    })
                })
                .catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消扔回'
                    });
                });
            },
       
            playAudio(id,index) {
                this.audioStatus[index].playing = true;
                let audio = document.getElementById(id);
                audio.play();
                audio.addEventListener('ended', () => {
                    this.audioStatus[index].playing = false;
                })
            },
            pauseAudio(id,index) {
                this.audioStatus[index].playing = false;
                document.getElementById(id).pause()
            },
            editCustomer() {
                this.$router.push({path: '/customer/edit?id=' + this.data.id + '&customerContactId='+ this.data.customerContactId});
            },
            getContactData() {

            	if(!this.customerDetail.customerContactId && !this.$route.query.customerContactId && this.$route.query.customerContactId == 'null'){
                    Message.warning('此客户暂无联系人');
            		return false
            	}else{
            		 this.$store.dispatch('customerContact', {id: this.$route.query.customerContactId || this.customerDetail.customerContactId})
                    .then((response) => {
                        let result = response.data;
                        if (result.data && result.code == 0) {
                            this.contactData = result.data;
                            this.$store.commit(MESSAGE_TELS , {messageTels : this.contactData.tel});
                        }
                    })
                    .catch((error) => {
                    });
            	}
               
            },
            initFollowData(){
                this.followForm.customerLevel = this.customerDetail.customerLevel;
                this.followForm.importantFlag = this.customerDetail.importantFlag+"";
                this.contactState = '1'; //是否有效联系
                //this.followForm.importantFlag = '0'; //是否重要客户
                this.followForm.contents = '';
                //this.followForm.kpFlag = false; //kp
                if(this.customerDetail.contactState == null){
                    this.contactState = 1+"";
                }else{
                    this.contactState = this.customerDetail.contactState+"";
                }
                this.followForm.kpFlag = this.kpFlag;
            },
            getCustomerDetail(step) {       //客户基本信息
                this.$store.dispatch('customerDetail', {id: this.data.id})
                    .then((response) => {
                        if(!response){
                            return;
                        }
                        let result = response.data;
                        if(result.data.provinceName==null){
                        	this.newAddress=''
                        }else{
                        	this.newAddress=result.data.provinceName+'/'+result.data.cityName+'/'+result.data.areaName
                        }
                        
                        if (result.code === 0) {
                            //pageTab
                            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                                let arr = this.pageTabsList;
                                arr[arr.length-1].name = result.data.customerName;
                                this.$store.commit('PAGETABSLIST',{data:arr})
                            }
                            this.customerDetail = result.data;

                            this.brandName=result.data.brandName //关联品牌名称
                            this.$store.commit(MESSAGE_IDS , {messageIds : this.customerDetail.id});
                            this.$store.commit(MESSAGE_NAMES , {messageNames : this.customerDetail.customerName});
                            this.getContactData();
                            this.followForm.customerName = this.customerDetail.customerName;
                            
                            if(step=='first'){
                                let followCache = this.$store.getters.followContentCache;
                                if(followCache.length){
                                    followCache.forEach((n)=>{
                                        if(n.customerName == this.followForm.customerName){
                                            this.followForm = n;
                                        }
                                    })
                                }else{
                                    this.initFollowData();
                                }
                            }else{
                                this.initFollowData();
                            }
                            this.followForm.customerLevel = this.customerDetail.customerLevel;
                            if(this.customerDetail.kpFlag==0){
                            	this.followForm.kpFlag=false
                            }else if(this.customerDetail.kpFlag==1){
                            	this.followForm.kpFlag=true
                            }
                            if(this.customerDetail.contactState==null){
                            	this.contactState='0'
                            }else{
                            	this.contactState = String(this.customerDetail.contactState);
                            }
                        }
                    })
                    .catch((error) => {
//                        Message.error('获取联系人详情失败');
                    });
            },
            getFollowList () {   //跟进信息
                this.$store.dispatch('customerFollowList', {customerId: this.data.id})
                    .then((response) => {
                        let result = response.data;
                        if (result.code === 0) {
                            this.audioStatus = [];
                            for(let i=0;i<result.data.length;i++) {
                                this.audioStatus.push({playing: false,duration: 0});
                            }
                            this.followList = result.data;
                            for(let i=0;i<result.data.length;i++) {
                                this.followList[i].contents&&(this.followList[i].contents = '<div>' + this.followList[i].contents.split('\n').join('</div><div>') + "</div>")
                            }
                        }
                    })
                    .catch((error) => {
//                        Message.error('获取跟进记录失败');
                    })
            },
            openWeb (url) {
                window.open(url);
            },
            formatDate: formatDate,
            // 提交跟进记录
            onSubmit () {
                if (this.followForm.customerLevel == '') {
                    this.$message.error('请选择客户类别');
                    return;
                }
                if (this.followForm.planDate == '') {
                    this.$message.error('请输入下次联系时间');
                    return;
                }
                let data = this.followForm;
                data.customerId = this.data.id;
                data.planDate = formatDate(this.followForm.planDate, 'YYYY-MM-dd hh:mm:ss');
                data.contactState=this.contactState
                if (this.followForm.kpFlag == true) {
                    data.kpFlag = 1;
                } else {
                    data.kpFlag = 0;
                }
                this.$store.dispatch('customerFollowAdd', data)
                    .then((response) => {
                        let result = response.data;
                        if (result.code == 0) {
                            Message.success('添加跟进记录成功');
                            this.getFollowList();
                            this.cleanFollowForm();
                        }else {
                            Message.error(result.message);
                        }
                    })
            },
            // 清空跟进记录表单
            cleanFollowForm () {
//              this.followForm.contactState = '1';
//              this.followForm.kpFlag = false;
//              this.followForm.customerLevel = '';
//              this.followForm.importantFlag = '0';
                this.followForm.planDate = '';
                this.followForm.contents = '';
                this.noteTemplate = '';
				this.getCustomerDetail('seconed');
            },

            //隐藏客户分类
            treeBlurHide(){
                this.category.showTree = false;
            },
            // 领取客户弹框
            receiveBox () {
                MessageBox.confirm('确认领取此公海客户吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.receive();
                })
            },
            //num:电话号码,str:phone/tel
            callContact(num,str) {
            	if(str == 'phone'){
		            var phone = num.split('-');
		            num = phone.join('');
		        }
                let user = JSON.parse(Cookie.get('userData'));
                this.$store.dispatch('callCustomer',{calledNum: num,customerId: this.data.id,uuId: user.id,deptCode: user.departmentId,}).then((res)=>{
                    if(res.data.code == 0) {
                        str == 'phone' ? this.callPhone = true : this.callTel = true;
                        this.getCallStatus(str);
                        axios.get('http://127.0.0.1:3366/callout?phone='+num+'&callback=cb_callout&recordId='+res.data.data.id,{})
                    }else{
                        Message.error('拨打电话失败！' + res.data.message);
                    }
                })
            },
            callHangContact(str) {
                str == 'phone' ? this.callPhone = false : this.callTel = false;
                axios.get('http://127.0.0.1:3366/callhang?callback=cb_callout',{})
            },
            //获取实时状态
            getCallStatus(str) {
                axios.get('http://127.0.0.1:3366/callstatus?callback=cb_callout&newcall=0',{})
                    .then((res) => {
                        let info =  JSON.parse(res.data.split('(')[1].split(')')[0]).Info;
                        if(info.phoneStatus != 'callover'){
                            setTimeout(()=>{
                                this.getCallStatus(str)
                            },2000)
                        }else {
                            str == 'phone' ? this.callPhone = false : this.callTel = false;
                        }
                    })
            },
            // 领取客户
            receive() {
                let userId = JSON.parse(Cookie.get('userData')).id;
                this.$store.dispatch('receiveCustomer', {ids: this.data.id, userid: userId})
                    .then((response) => {
                    let result = response.data;
                    if (result.code === 0) {
                        Message.success('领取客户成功');
                    } else {
                        Message.error(result.message);
                    }
                })
            },
            loadNode(node, resolve) {
                axios.get(process.env.baseUrl + '/department/list', {params:{ parentId:node.data.id||0}})
                    .then((ret)=>{
                        return resolve(ret.data.data);
                    })
            },
            handleSearchCheckChange(data,checked) {
                if(checked) {
                    this.positionForm.department = data.id;
                    this.userFilter.departmentId = data.id;
                    this.positionForm.departmentName = data.name;
                    this.positionForm.showTree = !this.positionForm.showTree;
                    this.$refs.searchTree.setCheckedKeys([]);
                    this.$refs.searchTree.setChecked(data,true)
                }
            },
            // 获取用户列表
            getUserList () {
                let data = this.userFilter;

                this.$store.dispatch('getUserOwnerData', data)
                    .then((response) => {
                        let result = response.data;
                        if (result.code === 0) {
                            this.userList = result.data.list;
                            this.pagingUserData.total = result.data.total;
                            this.pagingUserData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                        } else {
                            Message.error(result.message);
                        }
                    })
            },
            // dialog搜索用户
            deptUserSearch () {
                this.userFilter.pageNum = 1;
                this.getUserList();
            },
            // 关闭dialog回调
            closeDialog () {
                this.dialogCurrentRow = null;         // 清除高亮的行
                this.transSelectedCustomerId = null;  // 清除选择的客户
                this.transSelectedUserId = null;      // 清除选择的用户
                this.userFilter.departmentId = '';    // 清除select的部门选择
                this.dialogTableVisible = false
            },
            // dialog 用户列表单击选择高亮
            highlightDialog (val) {
                this.dialogCurrentRow = val;
            },
            // 选择分配到的用户
            selectUser (row, event, column) {
                this.transSelectedUserId = row.id;
            },
            userHandleSizeChange(val) {
                this.userFilter.pageNum = 1;
                this.userFilter.pageSize = val;
                this.getUserList();
            },
            userHandleCurrentChange(val) {
                this.userFilter.pageNum = val;
                this.pagingUserData.pageNum = val;
                this.getUserList();
            },
            // 保存分配
            transSubmit () {
                if (this.transSelectedUserId == '' || this.transSelectedUserId == null) {
                    this.$message.error('请先选择用户');return;
                }
                this.$store.dispatch('transCustomer', {userid: this.transSelectedUserId, ids: this.data.id})
                    .then((response) => {
                        let result = response.data;
                        if (result.code === 0) {
                            Message.success('分配客户成功');
                            this.dialogTableVisible = false;  // 成功后关闭dialog
                        } else {
                            Message.error(result.message);
                        }
                    })
            },
            selectDept(val) {
                this.userFilter.pageNum = 1;
                this.getUserList();
            },
            // 分配dialog
            transDialog () {
                this.transSelectedCustomerId = [this.data.id];
                //this.getDeptAll();

                // 从cookie中获取departmentRoleId
                this.departmentRoleId = JSON.parse(Cookie.get('userData')).departmentRoleId;

                this.getUserList();
                this.dialogTableVisible = true;
                this.$store.dispatch('getOwnerDeptment')
                    .then((response) => {
                        var result = response.data;
                        if (result.code === 0) {
                            this.deptList = result.data;
                        }
                    })
            },
            //获取销售员部门下拉框
            getOwnerDeptment() {
                this.$store.dispatch('getOwnerDeptment')
                    .then((response) => {
                        var result = response.data;
                        if (result.code === 0) {
                            this.ownerOptions = result.data;
                        }
                    })
            },
            //获取小计模板列表
            getNoteTemplateList() {
                var _this = this;
                axios.post(process.env.baseUrl + '/template/getTemplateList', {templateType: 1})
                    .then(function(response){
                        if(response.data.code == 0 && response.data.data.templateDtoList) {
                            _this.noteTemplateList = response.data.data.templateDtoList
                        }
                    })
            },
            noteTemplateChange() {
                this.followForm.contents = this.noteTemplateList[this.noteTemplate].content
            },
            showMessageDialog() {
                this.$store.commit(SHOW_MESSAGE , {showMessage : true});
            }
        },
        computed: {
            ...mapGetters({
                'customerLevels': 'getSalesCategoryList',
                'userData' : 'getUserData',
                'pageTabsList': 'getPageTabsList'
            }),
            kpFlag () {
                return this.customerDetail.kpFlag === 1;
            },
            signFlag () {
                return this.customerDetail.signFlag === 1 ? '1' : '0';
            }
        },
        created () {
            this.$store.dispatch('salesCategoryList', {page: 1, pageSize: 100});
            this.getCustomerDetail('first');
            this.getFollowList();
            this.getNoteTemplateList();
            
        },
        // name: 'comcrm-detail-costomer',
        // serverCacheKey: () => {
        //     return 'detail::'+this.customerDetail.id;
        // },

        mounted() {
            let userData = getCookie('userData');
            if(userData) {
                this.userData.userName = JSON.parse(userData).name;
                this.userData.userId = JSON.parse(userData).id;
                this.userData.deptCode = JSON.parse(userData).deptCode;
            }
            
        }
    }
</script>

<style lang="scss">
    .action_row {
    .el-button {
        float: right;
    .el-button--danger {
        margin-left: 10px;
    }
    }
    }

    .table {
        margin-top: 10px;
        border: 1px solid #ccc;
        font-size: 14px;
    pre{
        margin: 0;
        font-family: "PingFang SC,Helvetica Neue,Helvetica,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif";
    }
    .header_row {
        border-bottom: 1px solid #ccc;
        line-height: 40px;
        font-weight: bold;
        color: #008dd8;
        text-indent: 10px;
        background: #f1f2f2;
    }

    .col_2, .col_4 {
        text-align: left;
        text-indent: 3px;
    }

    .col_1, .col_3 {
        text-align: right;
        background: #f1f2f2;
    }

    .col_1, .col_2, .col_3 {
        border-right: 1px dotted #ccc;
        border-bottom: 1px dotted #ccc;
    &:last-child {
         border-bottom: none
     }
    }
    .col_4 {
        border-bottom: 1px dotted #ccc;
    }

    .col_bottom {
        border-bottom: none
    }

    .el-col {
        height: 40px;
        line-height: 40px;
    .el-button-group {
        margin-left: 10px;
    }
    }
    .customer_web {
    &:hover {
         cursor: pointer;
         text-decoration: underline;
     }
    }
    .content_title, .content_text {
        height: 300px;
    }
    textarea {
        resize: none;
        height: 300px;
    }
    .table_action_row {
        text-align: center;
        background: #f1f2f2;
    }
    }
    .signRow {
        background-color: #00ee00;
    }
    .follow_list {
        margin-top: 20px;
        border: 1px solid #ccc;
        font-size: 14px;
        min-width: 1040px;
        .el-col {
            height: 40px;
            line-height: 40px;
            border-right: 1px dotted #ccc;
            border-bottom: 1px dotted #ccc;
            text-indent: 12px;
        &:last-child {
             border-right: none;
         }
        }
        .follow_content {
            height:auto;
            min-height: 40px;
            padding: 5px 10px;
            border-bottom: none;
            word-spacing:0px;
            div{
                line-height: 24px;
            }
        }
        .audio-pause,
        .audio-play{
            width: 25px;
            height: 25px;
            vertical-align: middle;
            cursor: pointer;
        }
        .time_sty{
            line-height: 16px;
            vertical-align: middle;
            width: 100px;
            text-indent: 0;
            display: inline-block;
            word-wrap:break-word
        }
    }
    .cd-get-allot{
        padding: 20px 0 0;
        text-align: center;
    }
</style>